@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
* { margin: 0 auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; }
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
body { background: #FFF; font-family:  'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }






#wrap {
width: 1200px;
margin: 0 auto;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #FFF;
}






/* #header */
#header {
width: 100%; height: auto; margin:0 auto; 
}
#m_top{display:none; width:100%; height: 5px; background:#333;}
#logo {
display:block;
width: 100%;
background: #333;
 text-align: center; 
}
#logo2 {
display: none; width: 100%; overflow: hidden; background:#FFF;
}
.logo2_button { float: left; width:20%; margin:top 0; text-align:center;  } 
.logo2_text {float: left; width: 60%; left: 0 ; }
.logo2_tel { float: left; width:20%; margin:top 0; text-align:center;  } 






#top_tel{
width: 100%;
height: 100px;
margin-top: 20px;
margin: 0 auto;
background:#ffc107;
line-height:100px;
text-align:center;
}
#top_tel a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: bold;
font-style: normal;
line-height:100px;
}
#top_tel a span{
font-weight: bold;  font-size: 0.7em; 
}






#nav {
background:#030066;
width: 100%;
}
#nav ul { overflow: hidden; }
#nav ul li {
float: left;
width: 20%;
}
#nav ul li a {
display: block;
padding: 15px 0;
font-size: 2em; /* 18 / 16 */
color: #FFF;
text-align: center;
font-weight: bold;
}


#nav ul li a:hover {
color: #FFF;
background: #333;
}


/* #s_nav */


#s_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 20px;  position: absolute; z-index: 999; top: 0; left:-300px; background:#030066; }
.snav_no { text-align: right; margin-right: 5px; }
h1 { font-size: 1.250em; line-height: 1.7em; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #FFF; text-shadow:1px 1px 1px rgb(0,0,0); behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc'); text-align: center;}
#snav {display: block; }
#snav>ul{ width: 234px; margin: 0 auto; }
#snav > ul>li{ height:30px; border-top: 1px solid #817EE4;  ;}
#snav >ul> li > a { display: block; line-height: 30px; padding-left: 18px; font-size: 1em; color: #FFF; text-decoration: none;}


#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 800; background: transparent;  display:none;}




#img_box {
position: relative;
}






/* #contents */




#contents {
width: 1200px;
margin: 0 auto;
}


#title_top{
width: 100%; 
height: 100px;
margin: 0 auto;
background: #120A2A;
}


.title_top{
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
line-height: 100px;
}




#title{
width: 100%; 
background: #030066;
}
.title {
line-height:100px;
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
}
#content_img{
width: 100%; 
margin: 0 auto;
background: #FFF;
}








/*main-contents*/


#mainbn{ width: 100%; overflow: hidden; margin-top:30px; margin-bottom: 10px; background:#FFF;}
#main-left{width:40%; float: left; margin-left: 7.5%; margin-right:2.5%; }
#main-right{width:40%; float: left; margin-left: 2.5%; margin-right:7.5%; }




#main-title{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
background:#030066;
}


#main-title a{
text-align: center;
line-height:100px;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
}
#main-content_img{
 float: none;
width:100%;
}


#content_img img{
margin-top: 5px;
margin-bottom:5px;
}


/*#community*/


#community{
top:150px; right:350px; width: 100%;   margin:0 auto;
clear: both;
}
#footer {
padding: 10px 0;
text-align: center;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
line-height:60px;
text-align:center;
}
.footer a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
padding: 10px;
height: 60px;
line-height:60px;
}








/*media*/
@media screen and (max-width: 1200px) {
#wrap { width: 100%; border-left: none; border-right: none; }
#contents { width: 100%;}
#nav ul li a { font-size:1.5em;}
}


@media screen and (max-width:768px) {
#top_tel a{font-size: 1.5em; height: 60px;}
#top_tel a span{font-size: 0.7em; line-height:60px }
#title{height:auto; height: 60px;}
.title{font-size: 1.5em;  line-height: 60px;}
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#main-left{width:47%; float: left; margin-left: 0.5%; margin-right:2.5%; }
#main-right{width:47%; float: left; margin-left: 2.5%; margin-right:0.5%; }
#main-title a{font-size: 1.5em;line-height: 60px;}
#main-title{ height: auto;}
}
@media screen and (max-width: 750px) {
#nav ul li a { font-size:1em;}
}
@media screen and (max-width: 550px) {
#mainbn{ width: 100%; overflow: hidden; margin-top:15px; }
#main-title a{font-size: 1.5em;line-height: 40px;}
#m_top{display:block;}
#logo{display:none;}
#logo2{display:block;}
#top_tel { height: 40px;}
#top_tel a{font-size: 1em; line-height: 40px; font-weight: bold;}
#top_tel a span{font-size: 0.7em; line-height:40px; }
#nav {display:none;}
}